<!-- #layout name=blank-->
<style>
    .cm-s-mdn-like {
        border: 1px solid #e5e5e5;
    }
</style>
<div class="page-header">
    <h1 class="title">Jobs</h1>
</div>

<div data-bind="component: { name: 'kb-breadcrumb', params:[{
        name: 'SITES'
    },{
        name: 'DASHBOARD'
    },{
        name: Kooboo.text.common.Jobs
    }]}"></div>

<ul class="nav nav-tabs">
    <!-- ko foreach: tabTypes -->
    <li data-bind="css: { 'active': $data.value == $parent.curTab() }">
        <a href="javascript:;" data-bind="text: $data.displayName, click: $parent.changeTab.bind(this, $data.value)"></a>
    </li>
    <!-- /ko -->
</ul>

<div class="navbar navbar-default" data-bind="if: curTab() == 'pending'">
    <div class="container-fluid">
        <div class="btn-group navbar-btn">
            <a class="btn green" href="javascript:;" data-bind="click: onShowJobDialog">Add a job</a>
        </div>
        <a data-bind="visible: selectedJobs().length == 1, click: onRun" class="btn green navbar-btn">Run</a>
        <a data-bind="visible: showDeleteBtn, click: onDelete" class="btn red navbar-btn">Delete</a>
    </div>
</div>

<div data-bind="component: { name: 'kb-table', params: tableData }"></div>

<div data-bind="modal: showJobDialog" class="modal fade" data-backdrop="static" data-keyboard="false" id="job_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-bind="click: onHideJobDialog"><i class="fa fa-close"></i></button>
                <h4 class="modal-title">Add a job</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-2">Name</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" data-bind="value: jobName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">Start time</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" data-bind="datetimepicker: startTime, datetimepickerOptions: { startDate: moment().format('YYYY-MM-DD HH:mm') }" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <label class="checkbox-inline"><input type="checkbox" data-bind="checked: repeat" />Repeat</label>
                        </div>
                    </div>
                    <div class="form-group" data-bind="visible: repeat()">
                        <label class="control-label col-sm-2">Every</label>
                        <div class="col-sm-10">
                            <div class="form-inline">
                                <input type="number" class="form-control" value="1" min="0" data-bind="value: frequenceUnit" />
                                <select class="form-control" data-bind="value: frequence">
                                    <option value="Second">seconds</option>
                                    <option value="Minutes">minutes</option>
                                    <option value="Hour">hours</option>
                                    <option value="Day">days</option>
                                    <option value="Week">weeks</option>
                                    <option value="Month">months</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">Execute Code</label>
                        <div class="col-md-10">
                            <!-- ko foreach: { data: scheduleJobCode, as: 'code' } -->
                            <a href="javascript:;" class="btn" data-bind="css: { 'btn-default': !code.selected(), 'blue': code.selected() }, click: $parent.selectCode.bind(this, code)">
                                <i class="fa fa-code"></i>
                                <!-- ko text: code.name -->
                                <!-- /ko -->
                            </a>
                            <!-- /ko -->
                            <!-- ko if: scheduleJobCode().length == 0 -->
                            <p class="form-control-static">No code available</p>
                            <!-- /ko -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn green" data-bind="click: onSaveJob">Save</button>
                <button class="btn gray" data-bind="click: onHideJobDialog">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/tableModel.js",
            "/_Admin/Scripts/components/kbTable.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js",
            "/_Admin/Scripts/lib/moment.min.js",
            "/_Admin/Scripts/lib/bootstrap-datetimepicker.js",
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.js",
            "/_Admin/Scripts/lib/codemirror/mode/javascript/javascript.js",
            "/_Admin/Scripts/kobindings.datePicker.js",
            "/_Admin/Scripts/kobindings.codemirror.js"
        ])
        Kooboo.loadCSS([
            "/_Admin/Styles/bootstrap-datetimepicker.min.css",
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.css",
            "/_Admin/Scripts/lib/codemirror/lib/mdn-like.css"
        ])
    })()
</script>
<script src="/_Admin/View/System/Jobs.js"></script>